<template>
  <div>
    <!-- 上部分 -->
    <el-card class="filter-card">
      <div slot="header">
        <!-- 面包屑路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- /面包屑路径导航 -->
      </div>
      <!-- 数据筛选表单 -->
      <el-form ref="form" :model="form" label-width="40px" size="mini">
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="form.channel_id" placeholder="请选择频道">
            <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
             format="yyyy-MM-dd"
             value-format="yyyy-MM-dd">
            :default-time="['00:00:00','23:59:59']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- /数据筛选表单 -->
    </el-card>
    <!-- 下部分 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        根据筛选条件共查询到
        <span>{{total_count}}</span>条结果：
      </div>
      <!-- 列表部分 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="封面" width="180">
          <!-- slot-scope是干嘛的 slot-scope="scope"   :fit="fit"-->
          <!-- 当表格的内容不是简单的数据类型，是自定义的内容，如标签或者复杂数据类型时，需要使用template -->
          <!-- 通过scope获取到数据，那么在template里的标签都可以使用 -->
          <!-- scope.row 代表每一行的数据 -->
          <!-- scope.$index 代表每一行数据在数组中的下标 -->
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.cover.images[0]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="status" label="状态">
         <!-- 状态标签 -->
         <!-- 0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除 -->
         <template slot-scope="scope">
             <el-tag v-if="scope.row.status === 0">草稿</el-tag>
            <el-tag v-if="scope.row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status === 1" type="info">待审核</el-tag>
            <el-tag v-if="scope.row.status === 3" type="warning">审核失败</el-tag>
            <el-tag v-if="scope.row.status === 4" type="danger">已删除</el-tag>
         </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"></el-table-column>
        <el-table-column prop="date" label="操作">
         <!-- 操作按钮 -->
         <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.$index,scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.$index,scope.row)"></el-button>
         </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
          <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        prev-text="上一页"
        next-text="下一页"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_count">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>


<script>
// 引入文章接口
import { getList,getChannel,delArticle} from "@/api/article";
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date: [],
        channel_id:null,
        status: null,
        desc: "",
      },
      channelList:[],
      tableData: [],
        // 总数据条数
      total_count: 0,
        //每页显示条数
      per_page:10,
        //当前显示第几页
      page:1,
    };
  },
  methods: {
    onSubmit() {
      // console.log(this.form.status);
      this.hGetList();
    },
    hGetList() {
      // 判断日期格式:一旦选择日期之后，手动清除，data1就变成null，在传参的时候就会出错
      if(this.form.date === null){
        this.form.date = [];
      }
      getList({
          per_page:this.per_page,
          page:this.page,
          status:this.form.status,
          channel_id:this.form.channel_id,
          begin_pubdate:this.form.date[0],
          end_pubdate:this.form.date[1],
      })
        .then((res) => {
        //   console.log(res);
          this.tableData = res.data.data.results;
          this.total_count = res.data.data.total_count;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑文章
    edit(index,row){
        //scope.$index  是当前数据在数组中的下标
        //scope.row  当前数据行 也就是数组中的对象
        // 跳转到编辑文章组件
        this.$router.push({
            path:'/editArticle',
            query:{
                id:row.id,
            }
        });
    },
    // 删除文章
    del(index,row){
        // 获取当前点击的文章的id
        // console.log(row.id); //BigNumber  不能直接使用，需要转化为正常格式的数据 用toString()
        let id = row.id.toString();
        // console.log(id);
        // 发送请求删除文章
        delArticle(id)
        .then((res)=>{
            console.log(res);
        })
        .catch((err)=>{
          console.log(err);
        });
        // 重新渲染
    },
    // 获取文章频道
    hGetChannel(){
      getChannel()
      .then((res)=>{
        // console.log(res);
        this.channelList = res.data.data.channels;
      })
      .catch((err)=>{
        console.log(err);
      });
    },

    // 分页有关的事件
    // 每页的条数改变时触发
    handleSizeChange(size){
        // console.log(size);
        this.per_page = size;
        // 切换每页显示多少条之后，始终显示第一页的内容
        this.page = 1;
        // 重新发送请求，获取文章列表
        this.hGetList();

    },
    // 切换页码时触发
    handleCurrentChange(page){
        // console.log(page);
        this.page = page;
        this.hGetList();
    }

  },
  mounted() {
    this.hGetList();
    this.hGetChannel();
  },
};
</script>

<style lang="less" scoped>
.filter-card {
  margin-bottom: 40px;
}
.pagination {
    margin-top: 20px;
}
</style>